<template>
  <div class="home" style="margin: 100px;width: auto">
    <div><h1>我的会员等级: {{this.vip}}</h1></div>
<!--    数据区域-->
    <el-table :data="tableData" border stripe style="width: calc(100vw - 205px)">
<!--      <el-table-column :resizable="false" prop="id" label="id" />-->
      <el-table-column :resizable="false" prop="name" label="会员名称" />
      <el-table-column :resizable="false" prop="discount" label="会员折扣率" />
      <el-table-column :resizable="false" prop="grade" label="会员等级" />
      <el-table-column :resizable="false" prop="price" label="会员价格" />
      <el-table-column fixed="right" label="操作" width="100px">
        <template #default="scope">
<!--          修改按钮-->
          <el-button v-if="scope.row.grade<=this.grade" style="color: orangered" size="mini" @click="buy(scope.row.id)" disabled>已开通</el-button>
          <el-button v-else="scope.row.id==this.vipId" type="primary" size="mini" @click="buy(scope.row.id)">开通</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// @ is an alias to /src
import request from "@/utils/request";

export default {
  name: 'HomeView',
  components: {
    //注册

  },
  data() {
    return {
      form:{},
      dialogVisible:false,
      search:'',
      total:10,
      currentPage:1,
      pageSize:5,
      tableData:[],
      ids:[],
      user: sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {},
      vip:'',
      grade:''
    }
  },
  created() {
    this.pageList()
    this.getMyVip()
  },
  methods:{
    //开通vip 这个id是会员id,给用户开通哪一个级别的会员
    buy(id) {
      request.get("order/vip/buy",{params:{id:id,userId:this.user.id}}).then(res => {
        // 请求成功跳转沙箱支付的页面
        window.open(res.data)
      })
    },
    //获得用户vip等级
    getMyVip(){
      request.get("order/vip/getMyVip",{params:{id:this.user.id}}).then(res =>{
        this.vip = res.data.name
        this.grade=res.data.grade
      })
    },
    pageList(){
      request.get("order/vip/getVIP").then(res =>{
        this.tableData = res.data
      })
    },
    msgTip(msg,res){
      if(res.code == 200){
        this.$message({
          type:"success",
          message: msg+"成功"
        })
      }else{
        this.$message({
          type:"error",
          message:res.msg
        })
      }
    }
  }
}
</script>
